import { Component, useEffect } from "react";
import {
  Button,
  Cell,
  Empty,
  Avatar,
  Grid,
  Image,
  Tag,
} from "@nutui/nutui-react-taro";
import styles from "./index.scss";
import { useModel } from "@/store";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { queryScheduleInfo, queryOutpReg } from "@/services/register";
import { formatDate, calculateTime } from "@/utils/repeated";
import Layout from "@/components/Layout";
import Card from "@/components/Card";
import TimeRangePicker from "@/components/TimeRangePicker";

const currentStatusDict = {
  1: { background: "#40a9ff", text: "预约" },

  2: { background: "#52c41a", text: "取号" },
  9: { background: "#d9d9d9", text: "取消" },
};

export default () => {
  // const { user, getUser } = useModel("user");
  const { curPatientInfo } = useModel("patient");
  const [list, setList] = useState([]);
  const [timeRange, setTimeRange] = useState({
    startDate: calculateTime(-30),
    endDate: calculateTime(7),
  });

  const getList = () => {
    queryOutpReg({
      patientId: curPatientInfo.patientId,
      // patientId:'01733667',
      // startDate: calculateTime(-1000),
      // endDate: calculateTime(7),
      ...timeRange,
      pageSize: 999,
      pageNo: 1,
    }).then((res) => {
      if (res) {
        setList(res.data?.reverse());
      }
    });
  };

  useEffect(() => {
    getList();
  }, [timeRange]);

  return (
    <Layout title="挂号记录">
      <view className={styles.registerHistoryWarp}>
        <TimeRangePicker
          timeRangeChange={(e) => {
            setTimeRange(e);
          }}
        ></TimeRangePicker>
        {list.map((x) => {
          return (
            <Card key={x.autoId} style={{ marginBottom: "1em" }}>
              <view
                className={styles.scheduleCard}
                onClick={() => {
                  // Taro.navigateTo({
                  //   url: `/pages/inquiry/costDetails/index?autoRcptNo=${x.autoRcptNo}`,
                  // });
                }}
              >
                <view className={styles.cardtop}>
                  <view className={styles.doctorName}>{x.doctor}</view>
                </view>
                <view className={styles.dept}>
                  {x.visitDept}({x.clinicPosition})
                </view>
                <view className={styles.cardbottom}>
                  <view className={styles.time}>
                    {x.visitDate} {x.timeDesc}
                  </view>
                </view>
              </view>
            </Card>
          );
        })}
      </view>
    </Layout>
  );
};
